<!--
 * @Author: Li Zengkun
 * @Date: 2022-08-13 19:31:12
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-18 11:45:33
 * @Description: Select-Address
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>选择地址</title>
</head>

<body>

    <div class="loading">
        <img class="rotate-center" src="../img/loading.svg" alt="">
        <p>加载中...</p>
    </div>

    <header>
        <a id="return" href="javascript:history.back()">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </a>
        收货地址
        <p></p>
    </header>

    <div class="content-box">
        <div id="nothing" class="nothing">
            <img src="../img/ip/2号博学堂ip缺省页.svg" alt="">
            <p>暂无收货地址</p>
        </div>
        <ul id="address-list" class="address-list">
            <!-- 插入位置 -->
        </ul>
    </div>

    <a href="./add_address.html" class="bottom-btn">
        新建收货地址
    </a>

    <!-- 提示 tip -->
    <span id="tip" class="tip"></span>
</body>


<script src="../js/axios.min.js"></script>
<script src="../js/axios_config.js"></script>
<script src="../js/api.js"></script>

<script>
    let oLoading = document.querySelector('.loading')
    let oNothing = document.querySelector('#nothing')
    let oAddressList = document.querySelector('#address-list')
    let addressList = []
    let pagesize = 10
    let pageindex = 1


    init()

    /**
     * @description: 初始化
     * @return {*}
     */
    async function init() {

        await getAddressList()
        oLoading.style.display = 'none'
        console.log(addressList);
        if (!addressList) {
            oNothing.style.display = 'block'
            return
        }
        await initAddressList()
        Array.from(oAddressList.children).forEach((item) => {
            item.addEventListener('click', async(event) => {
                let obj = event.target
                let objId = obj.id
                let addressId = item.dataset['id']
                if (objId === 'edit-address') {
                    console.log("修改" + addressId);
                    window.location.href = `./edit_address.html?addressId=${addressId}`
                }
                if (objId === 'remove-address') {
                    console.log("删除" + addressId);
                    if (await removeAddress(addressId)) {
                        item.remove()
                    }
                } else {
                    // location.replace(`./confirm_order.html?addressId=${addressId}`)
                    sessionStorage.setItem('newSelectAddressId', addressId)
                        // window.location.href = './confirm_order.html';
                    history.back()

                }
            })

        })
    }

    /**
     * @description: 根据 id 删除地址
     * @return {*}  result (Boolean) 结果
     * @param {*} id (Number) 要删除的地址id
     */
    async function removeAddress(id) {
        let result = false
        await axios.post('/address/remove', {
            id: id
        }).then((resp) => {
            result = resp.status
            console.log(resp);
            openTip(resp.msg)
        })
        return result
    }


    /**
     * @description: 初始化收货地址列表
     * @return {*}  
     */
    async function initAddressList() {
        await addressList.forEach(element => {
            let elementHTML
            elementHTML = `<li data-id="${element.id}" class="address-item">
                    ${element.isDefault===1?'<div class="default">默认</div>':''}
                    <div class="text-content">
                        <span class="receiver-name">${element.name}</span>
                        <span class="receiver-phone">${element.tel}</span>
                        <p class="receiver-address">${element.province_name} ${element.city_name} ${element.county_name} ${element.town_name}  </p>
                        <p class="receiver-address">${element.street}</p>
                    </div>
                    <div class="btn edit">
                        <i id="edit-address" data-id="${element.id}" class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    </div>
                    <div class="btn delete">
                        <i id="remove-address" data-id="${element.id}" class="fa fa-trash-o" aria-hidden="true"></i>
                    </div>
                </li>`
            oAddressList.insertAdjacentHTML('beforeend', elementHTML)
        });
    }

    /**
     * @description: 获取全部地址列表
     * @return {*}
     */
    async function getAddressList() {
        let result = null
        await axios.get('/address/list', {
            params: {
                pagesize: pagesize,
                pageindex: pageindex,
            }
        }).then(async(resp) => {
            console.log(resp);
            if (resp.status) {
                addressList = addressList.concat(resp.data)
                if (resp.data.length != 0) {
                    pageindex++
                    await getAddressList()
                }
            }
        })
        return result
    }
</script>

<style>
    body {
        height: 100vh;
        background-color: #f4f8f7;
    }
    
    .content-box {
        background-color: transparent;
        height: calc(100vh - 32vw);
    }
    
    .address-item {
        margin-top: 2.67vw;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 3.33vw;
        box-sizing: border-box;
        gap: 0;
        align-items: center;
        position: relative;
    }
    
    .address-item .text-content {
        width: 80%;
        color: #555555;
    }
    
    .address-item .text-content>span {
        color: #333333;
        font-size: 4vw;
    }
    
    .address-item .text-content .receiver-name {
        width: 33vw;
        display: inline-block;
    }
    
    .address-item .text-content .receiver-address {
        padding-top: 2vw;
        font-size: 3.2vw;
        line-height: 6.4vw;
        color: #666666;
    }
    
    .address-item .default {
        display: block;
        position: absolute;
        padding: 0.5vw 2vw;
        border-radius: 1.67vw;
        font-size: 2vw;
        font-weight: 300;
        border: solid 0.13vw #c55a5c;
        top: 2.53vw;
        left: 65vw;
        color: #c55a5c;
    }
    
    .address-item .btn {
        text-align: center;
        width: 10%;
        height: 100%;
        font-size: 5vw;
        color: #c55a5c;
    }
    
    .address-item .delete {
        color: #555555;
    }
    /* nothing */
    
    .nothing {
        padding: 10vw;
        text-align: center;
        font-size: 4.5vw;
        display: none;
    }
    /* bottom-btn */
</style>

</html>